<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }
    
    h1 {
        color: green;
    }
    
    #slide {
        height: 400px;
        width:800px;
    }
    
    #slide div {
        position: absolute;
        z-index: 0;
    }
    
    #slide div.previous {
        z-index: 1;
    }
    
    #slide div.current {
        z-index: 2;
    }
    </style>
</head>

<body>
    <h1>首页</h1>
    <p>
        请点击左边的导航栏查看
    </p>
    <div id="slide">
        <div class="current"><img src="http://dkla.gitee.io/third_assignments/images/p1.jpg"></div>
        <div><img src="http://dkla.gitee.io/third_assignments/images/p2.jpg"></div>
        <div><img src="http://dkla.gitee.io/third_assignments/images/p3.jpg"></div>
        
    <script>
    $(function() {
        // 每隔3000ms执行切换函数
        setInterval(rotateImages, 3000);
    });

    function rotateImages() {
        var oCurPhoto = $('#slide div.current');
        var oNextPhoto = oCurPhoto.next();
        if (oNextPhoto.length == 0) {
            oNextPhoto = $('#slide div:first');
        }

        oCurPhoto.removeClass('current').addClass('previous');
        oNextPhoto.css({
                opacity: 0.0
            }).addClass('current')
            .animate({
                    opacity: 1.0
                }, 1000,
                function() {
                    oCurPhoto.removeClass('previous');
                });
    };
    </script>
</body>

</html>
